<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/font_776800_f23888khdpw/iconfont.css">
  <link rel="stylesheet" href="./css/font_761397_eqvtg1qc9nf/iconfont.css">
  <link rel="stylesheet" href="./css/swiper-3.3.1.min.css">
  <link rel="stylesheet" href="./css/mescroll.css">
  <title>今日头条移动端</title>
</head>

<body>
  <div class="container">
    <!-- 头部信息 -->
    <div class="header">
      <div class="msg">
        <i class="iconfont icon-xinxi"></i>
      </div>
      <div class="logo">
        <div class="logo-img">
        </div>
        <i class="iconfont icon-shuaxin"></i>
      </div>
      <div class="search">
        <i class="iconfont icon-sousuo"></i>
      </div>
    </div>
    <!-- 导航栏 -->

    <div class="scrollx mescroll-touch-x">
      <nav id="scrollxContent" class="scrollx-content">
        <ul id="nav" class="nav">
          <li class="active" i="0">推荐</li>
          <li i="1">要闻</li>
          <li i="2">科技</li>
          <li i="3">视频</li>
          <li i="4">搞笑</li>
          <li i="5">健康</li>
          <li i="6">体育</li>
          <li i="7">娱乐</li>
          <li i="8">赛事</li>
          <li i="9">游戏</li>
          <li i="10">电影</li>
          <li i="11">音乐</li>
          <li i="12">美食</li>
        </ul>
      </nav>
      <i class="iconfont icon-jiahaocu"></i>
    </div>

    <!--轮播-->
    <div id="swiper" class="swiper-container">
      <div id="swiperWrapper" class="swiper-wrapper">

        <!--推荐-->
        <div id="mescroll0" class="swiper-slide mescroll">
          <ul id="dataList0" class="data-list">
              <li class="thumb">
                  <div class="news-title">
                    <h2>
                      <a>金砖金句|第二个“金色十年”，习主席指明金砖合作四大方向</a>
                    </h2>
                    <ul class="tags">
                      <li class="tagSZ">
                        <a>时政</a>
                      </li>
                      <li>
                        <a>
                          <img src="./images/blank.gif" class="lazy-hook" data-echo="./images/source.jpg" alt="">
                        </a>
                      </li>
                      <li>
                        <a>新华社</a>
                      </li>
                      <li>·</li>
                      <li>
                        <a>45评论</a>
                      </li>
                      <li>·</li>
                      <li>
                        <a>11分钟前</a>
                      </li>
                    </ul>
                  </div>
                  <div class="poster">
                    <img src="./images/blank.gif" class="lazy-hook" data-echo="./images/slide1.jpg" alt="">
                  </div>
                </li>
                <li class="fourthumbs">
                  <div class="news-title">
                    <h2>
                      <a>大学生宿舍建泳池坐水中打牌，这些奇葩的消暑方式你体验过没？</a>
                    </h2>
                  </div>
                  <ul class="imgs">
                    <li>
                      <a>
                        <img src="./images/blank.gif" class="lazy-hook" data-echo="./images/news-fourthumb-1.jpg" alt="">
                      </a>
                    </li>
                    <li>
                      <a>
                        <img src="./images/blank.gif" class="lazy-hook" data-echo="./images/news-fourthumbs-2.jpg" alt="">
                      </a>
                    </li>
                    <li>
                      <a>
                        <img src="./images/blank.gif" class="lazy-hook" data-echo="./images/news-fourthumbs-3.jpg" alt="">
                      </a>
                    </li>
      
                  </ul>
                  <ul class="tags">
                    <li class="tagSH">
                      <a>时政</a>
                    </li>
                    <li>
                      <a>
                        <img src="./images/source.jpg" alt="">
                      </a>
                    </li>
                    <li>
                      <a>人民网</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>23评论</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>9分钟前</a>
                    </li>
                  </ul>
                </li>
                <li class="fourthumbs nothumb">
                  <div class="news-title">
                    <h2>
                      <a>从厌学叛逆到考上清华，妈妈究竟用了什么方法？</a>
                    </h2>
                  </div>
      
                  <ul class="tags">
                    <li class="tagSH">
                      <a>时政</a>
                    </li>
                    <li>
                      <a>
                        <img src="./images/source.jpg" alt="">
                      </a>
                    </li>
                    <li>
                      <a>人民网</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>23评论</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>9分钟前</a>
                    </li>
                  </ul>
                </li>
                <li class="fourthumbs nothumb">
                  <div class="news-title">
                    <h2>
                      <a>从厌学叛逆到考上清华，妈妈究竟用了什么方法？</a>
                    </h2>
                  </div>
      
                  <ul class="tags">
                    <li class="tagSH">
                      <a>时政</a>
                    </li>
                    <li>
                      <a>
                        <img src="./images/source.jpg" alt="">
                      </a>
                    </li>
                    <li>
                      <a>人民网</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>23评论</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>9分钟前</a>
                    </li>
                  </ul>
                </li>
                <li class="fourthumbs nothumb">
                  <div class="news-title">
                    <h2>
                      <a>从厌学叛逆到考上清华，妈妈究竟用了什么方法？</a>
                    </h2>
                  </div>
      
                  <ul class="tags">
                    <li class="tagSH">
                      <a>时政</a>
                    </li>
                    <li>
                      <a>
                        <img src="./images/source.jpg" alt="">
                      </a>
                    </li>
                    <li>
                      <a>人民网</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>23评论</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>9分钟前</a>
                    </li>
                  </ul>
                </li>
                <li class="fourthumbs nothumb">
                  <div class="news-title">
                    <h2>
                      <a>从厌学叛逆到考上清华，妈妈究竟用了什么方法？</a>
                    </h2>
                  </div>
      
                  <ul class="tags">
                    <li class="tagSH">
                      <a>时政</a>
                    </li>
                    <li>
                      <a>
                        <img src="./images/source.jpg" alt="">
                      </a>
                    </li>
                    <li>
                      <a>人民网</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>23评论</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>9分钟前</a>
                    </li>
                  </ul>
                </li>
                <li class="shipin">
                  <div class="news-title">
                    <h2>
                      <a>阿里巴巴在俄罗斯大火，普京夸赞：阿里巴巴是个伟大的公司</a>
                    </h2>
                  </div>
                  <div class="poster">
                    <img src="./images/mayun.jpg" alt="">
                    <span class="iconfont icon-play1"></span>
                  </div>
      
                  <ul class="tags">
                    <li class="tagSH">
                      <a>时政</a>
                    </li>
                    <li>
                      <a>
                        <img src="./images/source.jpg" alt="">
                      </a>
                    </li>
                    <li>
                      <a>人民网</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>23评论</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>9分钟前</a>
                    </li>
                  </ul>
                </li>
                <li class="shipin2">
                  <div class="news-title">
                    <h2>
                      <a>阿里巴巴在俄罗斯大火，普京夸赞：阿里巴巴是个伟大的公司</a>
                    </h2>
                  </div>
                  <div class="poster">
                    <img src="./images/mayun.jpg" alt="">
                    <span class="iconfont icon-play1"></span>
                  </div>
      
                  <ul class="tags">
                    <li class="tagSH">
                      <a>时政</a>
                    </li>
                    <li>
                      <a>
                        <img src="./images/source.jpg" alt="">
                      </a>
                    </li>
                    <li>
                      <a>人民网</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>23评论</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>9分钟前</a>
                    </li>
                  </ul>
                </li>
          </ul>
        </div>

        <!-- 要闻 -->
        <div id="mescroll1" class="swiper-slide mescroll">
            <ul id="dataList1" class="data-list">
            
            </ul>
          </div>
          
          <!-- 科技 -->
          <div id="mescroll2" class="swiper-slide mescroll">
            <ul id="dataList2" class="data-list">
            
            </ul>
          </div>

        <!-- 视频 -->
        <div id="mescroll3" class="swiper-slide mescroll">
          <ul id="dataList3" class="data-list">
          
          </ul>
        </div>

        <!-- 搞笑 -->
        <div id="mescroll4" class="swiper-slide mescroll">
            <ul id="dataList4" class="data-list">
            
            </ul>
          </div>

        <!-- 健康-->
        <div id="mescroll5" class="swiper-slide mescroll">
            <ul id="dataList5" class="data-list">
            
            </ul>
          </div>

         <!-- 体育 -->
        <div id="mescroll6" class="swiper-slide mescroll">
            <ul id="dataList6" class="data-list">
            
            </ul>
          </div>

        <!-- 娱乐 -->
        <div id="mescroll7" class="swiper-slide mescroll">
            <ul id="dataList7" class="data-list">
            
            </ul>
          </div>

            <!-- 赛事 -->
        <div id="mescroll8" class="swiper-slide mescroll">
            <ul id="dataList8" class="data-list">
            
            </ul>
          </div>

            <!-- 游戏 -->
        <div id="mescroll9" class="swiper-slide mescroll">
            <ul id="dataList9" class="data-list">
            
            </ul>
          </div>

            <!-- 电影 -->
        <div id="mescroll10" class="swiper-slide mescroll">
            <ul id="dataList10" class="data-list">
            
            </ul>
          </div>

            <!-- 音乐 -->
        <div id="mescroll11" class="swiper-slide mescroll">
            <ul id="dataList11" class="data-list">
            
            </ul>
          </div>

            <!-- 美食 -->
        <div id="mescroll12" class="swiper-slide mescroll">
            <ul id="dataList12" class="data-list">
            
            </ul>
          </div>

      </div>
    </div>

    <!-- 新闻栏 -->
    <!-- <div id="news" class="news">
      <div class="news-yidong">
        <div id="xialajiazai"></div>
        <ul>
          <li class="thumb">
            <div class="news-title">
              <h2>
                <a>金砖金句|第二个“金色十年”，习主席指明金砖合作四大方向</a>
              </h2>
              <ul class="tags">
                <li class="tagSZ">
                  <a>时政</a>
                </li>
                <li>
                  <a>
                    <img src="./images/blank.gif" class="lazy-hook" data-echo="./images/source.jpg" alt="">
                  </a>
                </li>
                <li>
                  <a>新华社</a>
                </li>
                <li>·</li>
                <li>
                  <a>45评论</a>
                </li>
                <li>·</li>
                <li>
                  <a>11分钟前</a>
                </li>
              </ul>
            </div>
            <div class="poster">
              <img src="./images/blank.gif" class="lazy-hook" data-echo="./images/slide1.jpg" alt="">
            </div>
          </li>
          <li class="fourthumbs">
            <div class="news-title">
              <h2>
                <a>大学生宿舍建泳池坐水中打牌，这些奇葩的消暑方式你体验过没？</a>
              </h2>
            </div>
            <ul class="imgs">
              <li>
                <a>
                  <img src="./images/blank.gif" class="lazy-hook" data-echo="./images/news-fourthumb-1.jpg" alt="">
                </a>
              </li>
              <li>
                <a>
                  <img src="./images/blank.gif" class="lazy-hook" data-echo="./images/news-fourthumbs-2.jpg" alt="">
                </a>
              </li>
              <li>
                <a>
                  <img src="./images/blank.gif" class="lazy-hook" data-echo="./images/news-fourthumbs-3.jpg" alt="">
                </a>
              </li>

            </ul>
            <ul class="tags">
              <li class="tagSH">
                <a>时政</a>
              </li>
              <li>
                <a>
                  <img src="./images/source.jpg" alt="">
                </a>
              </li>
              <li>
                <a>人民网</a>
              </li>
              <li>.</li>
              <li>
                <a>23评论</a>
              </li>
              <li>.</li>
              <li>
                <a>9分钟前</a>
              </li>
            </ul>
          </li>
          <li class="fourthumbs nothumb">
            <div class="news-title">
              <h2>
                <a>从厌学叛逆到考上清华，妈妈究竟用了什么方法？</a>
              </h2>
            </div>

            <ul class="tags">
              <li class="tagSH">
                <a>时政</a>
              </li>
              <li>
                <a>
                  <img src="./images/source.jpg" alt="">
                </a>
              </li>
              <li>
                <a>人民网</a>
              </li>
              <li>.</li>
              <li>
                <a>23评论</a>
              </li>
              <li>.</li>
              <li>
                <a>9分钟前</a>
              </li>
            </ul>
          </li>
          <li class="fourthumbs nothumb">
            <div class="news-title">
              <h2>
                <a>从厌学叛逆到考上清华，妈妈究竟用了什么方法？</a>
              </h2>
            </div>

            <ul class="tags">
              <li class="tagSH">
                <a>时政</a>
              </li>
              <li>
                <a>
                  <img src="./images/source.jpg" alt="">
                </a>
              </li>
              <li>
                <a>人民网</a>
              </li>
              <li>.</li>
              <li>
                <a>23评论</a>
              </li>
              <li>.</li>
              <li>
                <a>9分钟前</a>
              </li>
            </ul>
          </li>
          <li class="fourthumbs nothumb">
            <div class="news-title">
              <h2>
                <a>从厌学叛逆到考上清华，妈妈究竟用了什么方法？</a>
              </h2>
            </div>

            <ul class="tags">
              <li class="tagSH">
                <a>时政</a>
              </li>
              <li>
                <a>
                  <img src="./images/source.jpg" alt="">
                </a>
              </li>
              <li>
                <a>人民网</a>
              </li>
              <li>.</li>
              <li>
                <a>23评论</a>
              </li>
              <li>.</li>
              <li>
                <a>9分钟前</a>
              </li>
            </ul>
          </li>
          <li class="fourthumbs nothumb">
            <div class="news-title">
              <h2>
                <a>从厌学叛逆到考上清华，妈妈究竟用了什么方法？</a>
              </h2>
            </div>

            <ul class="tags">
              <li class="tagSH">
                <a>时政</a>
              </li>
              <li>
                <a>
                  <img src="./images/source.jpg" alt="">
                </a>
              </li>
              <li>
                <a>人民网</a>
              </li>
              <li>.</li>
              <li>
                <a>23评论</a>
              </li>
              <li>.</li>
              <li>
                <a>9分钟前</a>
              </li>
            </ul>
          </li>
          <li class="shipin">
            <div class="news-title">
              <h2>
                <a>阿里巴巴在俄罗斯大火，普京夸赞：阿里巴巴是个伟大的公司</a>
              </h2>
            </div>
            <div class="poster">
              <img src="./images/mayun.jpg" alt="">
              <span class="iconfont icon-play1"></span>
            </div>

            <ul class="tags">
              <li class="tagSH">
                <a>时政</a>
              </li>
              <li>
                <a>
                  <img src="./images/source.jpg" alt="">
                </a>
              </li>
              <li>
                <a>人民网</a>
              </li>
              <li>.</li>
              <li>
                <a>23评论</a>
              </li>
              <li>.</li>
              <li>
                <a>9分钟前</a>
              </li>
            </ul>
          </li>
          <li class="shipin2">
            <div class="news-title">
              <h2>
                <a>阿里巴巴在俄罗斯大火，普京夸赞：阿里巴巴是个伟大的公司</a>
              </h2>
            </div>
            <div class="poster">
              <img src="./images/mayun.jpg" alt="">
              <span class="iconfont icon-play1"></span>
            </div>

            <ul class="tags">
              <li class="tagSH">
                <a>时政</a>
              </li>
              <li>
                <a>
                  <img src="./images/source.jpg" alt="">
                </a>
              </li>
              <li>
                <a>人民网</a>
              </li>
              <li>.</li>
              <li>
                <a>23评论</a>
              </li>
              <li>.</li>
              <li>
                <a>9分钟前</a>
              </li>
            </ul>
          </li>
        </ul>
        <div id="shanglajiazai"></div>
      </div>
    </div> -->
  </div>

  <script src="./js/echo.js"></script>
  <script src="./js/mescroll.js"></script>
  <script src="./js/swiper-3.3.1.min.js"></script>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>

  <script>
    Echo.init({
      offset: 0,
      throttle: 0
    });

   	//导航菜单
     var mescrollArr=new Array(13);//每个菜单对应一个mescroll对象
			
			//当前菜单下标
			var curNavIndex=0;
			
			//初始化首页
      mescrollArr[curNavIndex]=initMescroll(curNavIndex);

	    /*初始化轮播*/
      var swiper=new Swiper('#swiper', {
          onTransitionEnd: function(swiper){
          var i=swiper.activeIndex;//轮播切换完毕的事件
          changePage(i);
        }
      });
      
      		    /*菜单点击事件*/
			$("#nav li").click(function(){
				var i=Number($(this).attr("i"));
				swiper.slideTo(i);//以轮播的方式切换列表
			})
			

      /*创建MeScroll对象*/
			function initMescroll(index){
				//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
				var mescroll = new MeScroll("mescroll"+index, {
					//上拉加载的配置项
					up: {
						callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
						isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
						noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
						empty: {
							icon: "./images/mescroll-empty.png", //图标,默认null
							tip: "暂无相关数据~", //提示
							btntext: "去逛逛 >", //按钮,默认""
							btnClick: function(){//点击按钮的回调,默认null
								alert("点击了按钮,具体逻辑自行实现");
							} 
						},
						clearEmptyId: "dataList"+index,
						toTop:{ //配置回到顶部按钮
							src : "./images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
							//offset : 1000
						},
						isBounce:false
					}
				});
				return mescroll;
			}
      

      /*切换列表*/
			function changePage(i) {
				if(curNavIndex!=i) {
					//更改列表条件
					var curNavDom;//当前菜单项
					$("#nav li").each(function(n,dom){
						if (dom.getAttribute("i")==i) {
							dom.classList.add("active");
							curNavDom=dom;
						} else{
							dom.classList.remove("active");
						}
					});
					//菜单项居中动画
					var scrollxContent=document.getElementById("scrollxContent");
					var star = scrollxContent.scrollLeft;//当前位置
					var end = curNavDom.offsetLeft + curNavDom.clientWidth/2 - document.body.clientWidth/2; //居中
					mescrollArr[curNavIndex].getStep(star, end, function(step,timer){
						scrollxContent.scrollLeft=step; //从当前位置逐渐移动到中间位置,默认时长300ms
					});
					//隐藏当前回到顶部按钮
					mescrollArr[curNavIndex].hideTopBtn();
					//取出菜单所对应的mescroll对象,如果未初始化则初始化
					if(mescrollArr[i]==null){
						mescrollArr[i]=initMescroll(i);
					}else{
						//检查是否需要显示回到到顶按钮
						var curMescroll=mescrollArr[i];
						var curScrollTop=curMescroll.getScrollTop();
						if(curScrollTop>=curMescroll.optUp.toTop.offset){
							curMescroll.showTopBtn();
						}else{
							curMescroll.hideTopBtn();
						}
					}
					//更新标记
					curNavIndex=i;
				}
			}
      
      /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
			function getListData(page){
				//联网加载数据
        var dataIndex=curNavIndex; //记录当前联网的nav下标,防止快速切换时,联网回来curNavIndex已经改变的情况;
        
        var html=`<li class="fourthumbs nothumb">
                  <div class="news-title">
                    <h2>
                      <a>从厌学叛逆到考上清华，妈妈究竟用了什么方法？</a>
                    </h2>
                  </div>
      
                  <ul class="tags">
                    <li class="tagSH">
                      <a>时政</a>
                    </li>
                    <li>
                      <a>
                        <img src="./images/source.jpg" alt="">
                      </a>
                    </li>
                    <li>
                      <a>人民网</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>23评论</a>
                    </li>
                    <li>.</li>
                    <li>
                      <a>9分钟前</a>
                    </li>
                  </ul>
                </li>`;

                //方法一(推荐): 后台接口有返回列表的总页数 totalPage
					//mescrollArr[dataIndex].endByPage(pageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
                mescrollArr[dataIndex].endSuccess(10);
                $('#dataList'+dataIndex).append(html);

			}
			
  </script>
</body>

</html>